<template>
	<view class="verify-page">
		<view class="verify-body">
			<view class="prompt">尊敬的用户，为保障您的权益，提供更好的服务请务必提供真实身份信息</view>
			<!-- 权益 -->
			<form class="user-form" @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view v-if="userInfo.realname==null||userInfo.realname==''" class="uni-input-wrapper">
						<input class="uni-input" name="realname" placeholder="请输入姓名" :minlength="2" :maxlength="5" :value="form.realname" @input="changeForm($event, 'realname')" />
						<text class="slw-icon" v-if="form.realname && form.realname.length" @click="clearInput('realname')">&#xe832;</text>
					</view>
					<view v-else class="uni-input-wrapper">
						<view class="uni-input">{{userInfo.realname==null?'':formatName(userInfo.realname)}}</view>
					</view>
					<view class="h-line"></view>
				</view>
				<view class="uni-form-item uni-column">
					<view v-if="userInfo.realname==null||userInfo.realname==''" class="uni-input-wrapper">
						<input class="uni-input" name="id_number" placeholder="请输入有效身份证号码" :maxlength="18" :value="form.id_number" @input="changeForm($event, 'id_number')" />
						<text class="slw-icon" v-if="form.id_number && form.id_number.length" @click="clearInput('id_number')">&#xe832;</text>
					</view>
					<view v-else class="uni-input-wrapper">
						<view class="uni-input">{{userInfo.id_number}}</view>
					</view>
					<view class="h-line"></view>
				</view>
	
				<view class="uni-btn-v">
					<button v-if="userInfo.review_status==-1" disabled circle type="primary">审核中</button>
					<button v-else-if="userInfo.realname==''||userInfo.realname==null" circle formType='submit' type="primary">提交实名认证</button>
					<button v-else circle disabled type="primary">已认证</button>
					<!-- <slw-button v-if="userInfo.review_status==-1" disabled circle type="primary">审核中</slw-button> -->
					<!-- <slw-button v-else-if="userInfo.realname==''||userInfo.realname==null" circle formType='submit'>提交实名认证</slw-button> -->
					<!-- <slw-button v-else circle disabled type="primary">已认证</slw-button> -->
				</view>
			</form>
		</view>

		<u-popup v-model="isshow" width="80%" mode="center" border-radius="14">
				<view class="makeCont">
					<view class="make_tit">温馨提示</view>
					<view class="make_name">您还未做风险评测，为了给您提供更优质的服务，请您优先进行风险评测</view>
					
					<view class="make_btn1">
						<u-button class="realbtn right" type="primary" @click="isshow=false">取消</u-button>
						<u-button class="realbtn" type="primary" @click="raisalFn">去评测</u-button>
					</view>
				</view>
		</u-popup>
		<view class="tips">
			<view class="zhu">注：</view>
			<view class="tip">
				<!-- <view class="tip-icon">*</view> -->
				<!--实名认证信息会影响创后续购买产品或服务  -->
				<!-- <view class="tip-text">实名认证信息会影响后续购买产品或服务，请认真填写</view> -->				
				<view class="tip-text">
					1.  以个人身份证上的姓名为准，该项将作为今后参与搜量网获得或享收相关权益的凭证；
				</view>
			</view>
			<br>
			<view class="tip">
				<!-- <view class="tip-icon">*</view> -->
				<!-- <view class="tip-text">每个用户每月最多认证3次，认证成功后无法修改</view> -->
				<view class="tip-text">2.  每个用户仅认证一次，认证后无法修改，请认真填写</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {realNameAuth, getSiteMemberInfo} from '@/api/member.js'
	import {getRankPage} from '@/api/rank.js'
	import {toUserPage} from '@/utils/PageRouter.js'
	import SlwButton from '@/components/slw-ui/button/index.vue'
	
	export default {
		components: {SlwButton},
		data() {
			return {
				isshow:false,
				form: {},
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo()
			let raisal=uni.getStorageSync('appraisal_key')
			if(raisal){
				this.isshow=false
			}
		},
		methods: {
			// 提交实名认证
			authentication(){
				this.isshow = true
			},
			formatName(str) {
			  return str.substr(0,str.length-1)+'*'
			   // + new Array(str.length).join('*');
			},
			// 去测评
			raisalFn(){
				uni.navigateTo({
					url:'../appraisal/salcont/salcont'
				})
			},
			
			//	获取用户信息
			getUserInfo () {
				getSiteMemberInfo().then(res=> {
					if (res.code === 200 && res.data) {
						uni.setStorageSync('userinfo_key', res.data)
					}
				})
				const userInfo = uni.getStorageSync('MEMBER_INFO')
				this.userInfo = userInfo
			},
			//	提交 form 表单
			formSubmit(e) {
				const {value} = e.detail
				uni.showLoading({title: '加载中...'})
				let{assess_status, assess_grade} = uni.getStorageSync('userinfo_key')
				let raisal=uni.getStorageSync('appraisal_key')
				if(assess_status==1 && (assess_grade || raisal)){
					let cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
					//输出 true
					let length=value.realname.length
					if(cP.test(value.id_number)&&length<=4){
						realNameAuth(value).then(res => {
						uni.showToast({icon: 'none', title: '实名认证成功'})
						uni.hideLoading()
						toUserPage()
						}).catch(res => {
							uni.hideLoading()
							uni.showToast({title: res.message, icon: 'none'})
						})
					}else{
						uni.hideLoading()
						uni.showToast({icon: 'none', title: '姓名或身份证输入不合法'})
					}
				}else{
					uni.hideLoading()
					this.isshow=true
				}				
			},
			//	输入框 change 事件
			changeForm (e, name) {
				const {value} = e.target
				this.$set(this.form, name, value)
			},
			//	清空 input 输入框
			clearInput (name) {
				this.$set(this.form, name, '')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.makeCont{
		padding: 20px 15px;
		.make_tit{
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			// margin: 10px 0;
		}
		.make_name{
			font-size: 14px;
			text-align: center;
			margin: 10px 0;
		}
		.make_cont{
			display: flex;
			// justify-content: center;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1rpx solid #F1F1F1;
		}
		.make_btn{
			margin: 15px 0;			
		}
		.make_btn1{
			margin:20px 0 0;
			display: flex;
			.realbtn{
				width: 50%;
			}
			.right{
				margin-right: 2px;
			}
		}
		
	}
	.verify-page{
		height: calc(100vh - var(--window-top));
		padding: 30rpx;
		background: #fff;
		.test-headfs{
			background: #007AFF;
		}
		.verify-body{
			padding: 40rpx;
			.prompt{
				color: #999;
				font-size: 24rpx;
				text-align: center;
				padding-bottom: 60rpx;
			}
			
			.user-form{
				.uni-input{
					// padding: 20rpx 0;
				}
				.uni-btn-v{
					padding-top: 100rpx;
				}
			}
			
			.uni-input-wrapper {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				flex-direction: row;
				background: #fff;
				margin: 5px 0;
			}
			
			.uni-input {
				height: 28px;
				line-height: 28px;
				font-size: 15px;
				padding: 0px;
				flex: 1;
				background: #fff;
			}
		}
		.tips{
			color: #666;
			font-size: 20rpx;
			.zhu{
				margin: 10px 0;
				color: #fb4319;
			}
			.tip{
				display: flex;
				align-items: center;
			}
			.tip-icon{
				color: #ff7756;
				line-height: 1;
			}
			.tip-text{
				color: #fb4319;
			}
		}
	}
</style>
